<template>
  <view class="collectionList">
    <view class="list" v-if="!loading&&list.length>0">
      <view v-for="(item,index) in list" :key="index" @click="toDetail(item)">
        <view class="f ai-c">
          <image :src="item.select?'../../static/select-active.png':'../../static/select.png'" v-show="isBatch" class="select" @click="handleSelect(index)"></image>
          <view class="list-box f ai-c jc-s-b f1">
            <image :src="item.image" class="poster"></image>
            <view class="info f fd-c f1">
              <view class="title">
                {{item.title}}
              </view>
              <view class="f ai-c jc-s-b browse">
                <view>{{item.read_num}}人浏览</view>
                <view class="f ai-c">
                  <image src="../../static/collect-active.png" class="collect" @click.stop="handleCollect(item)"></image>
                  <!-- <image src="../../static/copy.png" class="collect" @click="handleCopy(item)">
									</image> -->
                  <image src="../../static/more.png" class="more" @click.stop="handleMore(index)"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="f jc-s-b more-box" v-show="item.checked">
          <view class="f fd-c ai-c" @click.stop="handleCollect(item)">
            <image src="../../static/list-collect.png"></image>
            收藏
          </view>
          <view class="f fd-c ai-c" v-show="item.is_download==1" @click.stop="handleDownload(item)">
            <image src="../../static/download.png"></image>
            下载
          </view>
          <view class="f fd-c ai-c share">
            <button open-type="share" :data-obj="item" catchtap="share" style="">
              <image src="../../static/share.png"></image>
              <text>分享</text>
            </button>
          </view>
          <view class="f fd-c ai-c" @click.stop="handleShare(item)">
            <image src="../../static/pyq.png"></image>
            朋友圈
          </view>
          <view class="f fd-c ai-c" v-show="item.is_print==1" @click.stop="handlePrint(item)">
            <image src="../../static/print.png"></image>
            打印
          </view>
        </view>
      </view>

    </view>
    <view v-if="!loading&&list.length==0" class="noData">
      <image src="../../static/noData.png" class="noData"></image>
      <view>暂时没有收藏资料</view>

    </view>
    <!-- 底部 -->
    <view class="bot-box f ai-c jc-c">
      <view class="batch" v-show="!isBatch" @click="handleBatch">批量管理</view>
      <view class="f manage" v-show="isBatch">
        <view @click="isBatch=false">取消管理</view>
        <view @click="handleAllSelect">{{allChecked?'取消全选':'全选'}}</view>
        <view @click="handleDel">删除</view>
      </view>
    </view>
    <!-- 复制到收藏夹 -->
    <CopyFavorites ref="copyFavorites" />
  </view>
</template>

<script>
import {
  collectionList, batchDeleteCollection
} from '@/api/mine.js'
import CopyFavorites from '@/components/CopyFavorites/index.vue'
import { collectionDatabase } from '@/api/index.js'
export default {
  components: {
    CopyFavorites
  },
  data () {
    return {
      list: [],
      isBatch: false,
      allChecked: false,
      id: null,
      loading: false
    }
  },
  onLoad (options) {
    this.id = options.id
    this.getList()
  },
  onShareAppMessage (res) {
    const data = res.target.dataset.obj
    if (res.from === 'button') {
      // 来自页面内转发按钮
      return {
        title: data.title,
        path: `/pages/share/share?type=1&id=${data.id}&shareType=friend&database_type=1`,
        imageUrl: data.image
      };
    }
  },
  methods: {
    handlePrint (data) {
      uni.navigateTo({
        url: `/pages/pdf/printMaterial?id=${data.id}`
      })
    },
    //pdf详情
    toDetail (data) {
		 data.read_num=data.read_num+1
      uni.navigateTo({
        url: `/pages/pdf/pdf?id=${data.id}`
      })
    },
    //取消收藏
    async handleCollect (data) {
      const that = this
      uni.showModal({
        title: '提示',
        content: '确定取消收藏',
        success: async function (res) {
          if (res.confirm) {
            await collectionDatabase({
              database_id: data.id,
              title: data.title
            })
            that.getList()
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });

    },
    //删除
    async handleDel () {
      let ids = []
      this.list.forEach(item => {
        if (item.select) {
          ids.push(item.id)
        }
      })
      if (ids.length == 0) {
        uni.showToast({
          title: '请选择需要删除的资料',
          icon: 'none'
        })
        return
      }

      await batchDeleteCollection({ ids: ids, favorites_id: this.id })
      uni.showToast({
        title: '删除成功',
        icon: 'none'
      })
      this.getList()
    },
    //分享到朋友圈
    handleShare (data) {
      uni.navigateTo({
        url: `/pages/share/share?type=1&id=${data.id}&shareType=pyq&database_type=1`
      })
    },
    //下载
    handleDownload (data) {
      // this.$store.dispatch('getFileData', data)
      uni.navigateTo({
        url: `/pages/download/download?id=${data.id}`
      })
    },
    async getList () {
      this.loading = true
      const {
        data
      } = await collectionList({
        favorites_id: this.id,
        type: 1
      })
      data.forEach(item => {
        item.checked = false
        item.select = false
      })
      this.list = data
      this.loading = false
    },
    //全选
    handleAllSelect () {
      this.allChecked = !this.allChecked
      this.list.forEach(item => {
        item.select = this.allChecked
      })
    },
    //单选
    handleSelect (index) {
      this.list[index].select = !this.list[index].select
    },
    handleBatch () {
      this.isBatch = true
    },
    handleCopy (data) {
      this.$refs.copyFavorites.setPopup(data);
    },
    //点击更多
    handleMore (index) {
      this.list.forEach((item, itemIndex) => {
        if (index == itemIndex) {
          item.checked = !item.checked
        } else {
          item.checked = false
        }

      })
    },
  }
}
</script>

<style scoped lang="scss">
button {
  background-color: transparent;
  border: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 22rpx;
  color: #464e59;

  text {
    position: relative;
    margin-top: -14rpx;
  }
}

button::after {
  border: none;
}

.collectionList {
  background: #f7f8fc;
  min-height: 100vh;
  padding-bottom: 120rpx;
  box-sizing: border-box;
  .noData {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-size: 24rpx;
    color: #999;

    image {
      width: 400rpx;
      height: 400rpx;
    }
  }

  .manage {
    width: 100%;

    view {
      width: 33%;
      text-align: center;
      font-size: 28rpx;
      border-right: 1px solid #ebebeb;
    }

    view:last-child {
      border-right: none;
      color: #126efd;
    }
  }

  .bot-box {
    width: 100%;
    background: #fff;
    box-shadow: 0 0 20rpx #efefef;
    height: 120rpx;
    padding: 0 32rpx;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 0;

    .batch {
      text-align: center;
      font-size: 28rpx;
      line-height: 120rpx;
    }
  }

  .list {
    width: 710rpx;
    margin: auto;

    .select {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }

    .more-box {
      font-size: 22rpx;
      color: #464e59;
      margin-top: 24rpx;
      margin-bottom: 10rpx;
      padding: 0 24rpx;
      box-sizing: border-box;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-bottom: 8rpx;
      }
    }

    .list-box {
      background: #fff;
      border-radius: 24rpx;
      padding: 24rpx;
      box-sizing: border-box;
      margin-bottom: 16rpx;

      .info {
        .browse {
          color: #999999;
          font-size: 24rpx;
          margin-top: 40rpx;

          .collect {
            width: 30rpx;
            height: 30rpx;
            margin-right: 32rpx;
          }

          .more {
            width: 30rpx;
            height: 30rpx;
          }
        }

        .title {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
          font-weight: 700;
        }

        .recommend {
          background: linear-gradient(to right, #36c684, #03c9ba);
          width: 80rpx;
          height: 35rpx;
          color: #fff;
          font-size: 24rpx;
          border-radius: 8rpx;
          display: inline-block;
          text-align: center;
          margin-right: 8rpx;
          line-height: 35rpx;
          font-weight: 800;
        }
      }

      .poster {
        width: 170rpx;
        height: 210rpx;
        margin-right: 16rpx;
      }
    }
  }
}

@media only screen and (min-width: 750px) {
		.collectionList {
			

			.list {
				width: 750px;
				margin: auto;
			
				.more-box {
					font-size: 22px;
					color: #464e59;
					margin-top: 24px;
					margin-bottom: 10px;
					padding: 0 24px;
					box-sizing: border-box;
			
					image {
						width: 40px;
						height: 40px;
						margin-bottom: 8px;
					}
				}
			
				.list-box {
					background: #fff;
					border-radius: 24px;
					padding: 12px;
					box-sizing: border-box;
					margin-bottom: 16px;
			
					.info {
						.browse {
							color: #999999;
							font-size: 28px;
							margin-top: 40px;
			
							.collect {
								width: 30px;
								height: 30px;
								margin-right: 16px;
							}
			
							.more {
								width: 30px;
								height: 30px;
							}
						}
			
						.title {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 28px;
							font-weight: 700;
						}
			
						.recommend {
							background: linear-gradient(to right, #36c684, #03c9ba);
							width: 80px;
							height: 35px;
							color: #fff;
							font-size: 24px;
							border-radius: 8px;
							display: inline-block;
							text-align: center;
							margin-right: 8px;
							line-height: 35px;
							font-weight: 800;
						}
					}
			
					.poster {
						width: 170px;
						height: 210px;
						margin-right: 16px;
					}
				}
			}
			
		}

	}

</style>